<template>
  <div class="grid-page">
    <!-- 标题 -->
    <van-nav-bar title="请选择题目" fixed placeholder />

    <!-- 九宫格布局 -->
    <div class="grid-container">
      <van-grid :border="false" :column-num="3" :gutter="10">
        <van-grid-item
          v-for="(item, index) in gridItems"
          :key="item.icon"
          :text="`第${index + 1}题`"
          @click="handleGridClick(item)"
        />
      </van-grid>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 九宫格数据
const gridItems = ref([
  { icon: 'home-o', text: '首页', path: '/home' },
  { icon: 'search', text: '搜索', path: '/search' },
  { icon: 'friends-o', text: '好友', path: '/friends' },
  { icon: 'setting-o', text: '设置', path: '/settings' },
  { icon: 'photo-o', text: '相册', path: '/album' },
  { icon: 'music-o', text: '音乐', path: '/music' },
  { icon: 'video-o', text: '视频', path: '/video' },
  { icon: 'comment-o', text: '消息', path: '/messages' },
  { icon: 'more-o', text: '更多', path: '/more' }
]);

// 点击九宫格项
const handleGridClick = (item) => {
  console.log('_item', item)
};
</script>

<style scoped>
.grid-page {
  padding: 10px;
  box-sizing: border-box;
}

.grid-container {
  margin-top: 20px;
}

/* 自定义九宫格项样式 */
:deep(.van-grid-item__content) {
  border-radius: 18px;
  background-color: #f7f8fa;
  padding: 30px 0;
  .van-grid-item__text{
    font-size: 60px;
    font-weight: bold;
  }
}

:deep(.van-grid-item__icon) {
  font-size: 24px;
  margin-bottom: 8px;
}

:deep(.van-grid-item__text) {
  font-size: 14px;
  color: #333;
}
</style>
